<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习中心 | 师徒编程</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .section-title {
                @apply text-xl font-semibold mb-4 pb-2 border-b border-gray-200;
            }
            .node-active {
                @apply bg-sky-50 text-sky-600 font-medium;
            }
            .node-hover {
                @apply hover:bg-gray-50 transition-colors;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col">
    <div id="app">
        <!-- 顶部导航 -->
        <header class="bg-gray-900 text-white shadow-md sticky top-0 z-50">
            <div class="container mx-auto px-4 py-3 flex items-center justify-between">
                <a href="#" class="flex items-center gap-2">
                    <span class="bg-white text-gray-900 p-1 rounded-md">师</span>
                    <span class="font-semibold text-lg">师徒编程</span>
                </a>
                <nav class="hidden md:flex items-center gap-6">
                    <a href="#" class="hover:text-sky-400 transition-colors">首页</a>
                    <a href="#" class="text-sky-400 border-b-2 border-sky-400 pb-1">学习中心</a>
                    <a href="#" class="hover:text-sky-400 transition-colors">直播</a>
                    <a href="#" class="hover:text-sky-400 transition-colors">关于我们</a>
                </nav>
                <div class="flex items-center gap-4">
                    <button class="hidden md:block text-sm bg-sky-600 hover:bg-sky-700 px-4 py-1.5 rounded transition-colors">
                        登录/注册
                    </button>
                    <button class="md:hidden text-xl" @click="toggleMobileMenu">
                        <i class="fa fa-bars"></i>
                    </button>
                </div>
            </div>
            
            <!-- 移动端菜单 -->
            <div v-if="mobileMenuOpen" class="md:hidden bg-gray-800 border-t border-gray-700">
                <div class="container mx-auto px-4 py-3 flex flex-col gap-3">
                    <a href="#" class="py-2 hover:text-sky-400 transition-colors">首页</a>
                    <a href="#" class="py-2 text-sky-400">学习中心</a>
                    <a href="#" class="py-2 hover:text-sky-400 transition-colors">直播</a>
                    <a href="#" class="py-2 hover:text-sky-400 transition-colors">关于我们</a>
                    <button class="text-sm bg-sky-600 hover:bg-sky-700 px-4 py-1.5 rounded transition-colors w-full">
                        登录/注册
                    </button>
                </div>
            </div>
        </header>

        <!-- 主体内容区 -->
        <div class="container mx-auto px-4 py-6 flex-grow">
            <div class="flex flex-col lg:flex-row gap-6">
                <!-- 左侧课程分类导航 -->
                <aside class="w-full lg:w-64 flex-shrink-0">
                    <div class="bg-white rounded-lg shadow-sm p-4 sticky top-24">
                        <h3 class="font-medium text-gray-900 mb-4 flex items-center gap-2">
                            <i class="fa fa-th-large text-sky-500"></i> 课程分类
                        </h3>
                        <ul class="space-y-1">
                            <li>
                                <button 
                                    @click="selectCategory('python')"
                                    class="w-full text-left py-2 px-3 rounded flex items-center gap-3 node-hover"
                                    :class="currentCategory === 'python' ? 'node-active' : ''"
                                >
                                    <i class="fa fa-python text-2xl"></i>
                                    <span>Python</span>
                                </button>
                            </li>
                            <li>
                                <button 
                                    @click="selectCategory('java')"
                                    class="w-full text-left py-2 px-3 rounded flex items-center gap-3 node-hover"
                                    :class="currentCategory === 'java' ? 'node-active' : ''"
                                >
                                    <i class="fa fa-coffee text-2xl"></i>
                                    <span>Java</span>
                                </button>
                            </li>
                            <li>
                                <button 
                                    @click="selectCategory('mysql')"
                                    class="w-full text-left py-2 px-3 rounded flex items-center gap-3 node-hover"
                                    :class="currentCategory === 'mysql' ? 'node-active' : ''"
                                >
                                    <i class="fa fa-database text-2xl"></i>
                                    <span>MySQL</span>
                                </button>
                            </li>
                            <li>
                                <button 
                                    @click="selectCategory('html')"
                                    class="w-full text-left py-2 px-3 rounded flex items-center gap-3 node-hover"
                                    :class="currentCategory === 'html' ? 'node-active' : ''"
                                >
                                    <i class="fa fa-html5 text-2xl"></i>
                                    <span>HTML/CSS</span>
                                </button>
                            </li>
                            <li>
                                <button 
                                    @click="selectCategory('js')"
                                    class="w-full text-left py-2 px-3 rounded flex items-center gap-3 node-hover"
                                    :class="currentCategory === 'js' ? 'node-active' : ''"
                                >
                                    <i class="fa fa-code text-2xl"></i>
                                    <span>JavaScript</span>
                                </button>
                            </li>
                        </ul>
                    </div>
                </aside>

                <!-- 右侧主内容区 -->
                <main class="flex-1">
                    <!-- 页面标题 -->
                    <h2 class="text-2xl font-semibold mb-6" v-if="!showCourseDetail">
                        {{ currentCategory === 'python' ? 'Python 课程' : 
                          currentCategory === 'java' ? 'Java 课程' : 
                          currentCategory === 'mysql' ? 'MySQL 课程' : 
                          currentCategory === 'html' ? 'HTML/CSS 课程' : 'JavaScript 课程' }}
                    </h2>

                    <!-- 课程筛选标签 -->
                    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
                        <div class="flex flex-wrap gap-2">
                            <button 
                                @click="selectFilter('all')"
                                class="px-4 py-1.5 rounded text-sm transition-colors"
                                :class="currentFilter === 'all' ? 'bg-sky-600 text-white' : 'bg-gray-100 hover:bg-gray-200'"
                            >
                                全部课程
                            </button>
                            <button 
                                @click="selectFilter('teacher')"
                                class="px-4 py-1.5 rounded text-sm transition-colors"
                                :class="currentFilter === 'teacher' ? 'bg-sky-600 text-white' : 'bg-gray-100 hover:bg-gray-200'"
                            >
                                师傅专属课程
                            </button>
                            <button 
                                @click="selectFilter('public')"
                                class="px-4 py-1.5 rounded text-sm transition-colors"
                                :class="currentFilter === 'public' ? 'bg-sky-600 text-white' : 'bg-gray-100 hover:bg-gray-200'"
                            >
                                公开课程
                            </button>
                            <button 
                                @click="selectFilter('vip')"
                                class="px-4 py-1.5 rounded text-sm transition-colors"
                                :class="currentFilter === 'vip' ? 'bg-sky-600 text-white' : 'bg-gray-100 hover:bg-gray-200'"
                            >
                                <i class="fa fa-diamond text-yellow-500"></i> VIP课程
                            </button>
                        </div>
                    </div>

                    <!-- 课程列表（卡片式） -->
                    <div v-if="!showCourseDetail" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                        <!-- 课程卡片1 -->
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden card-hover cursor-pointer" @click="showCourseDetail = true; currentCourseId = 1">
                            <div class="relative">
                                <img src="https://picsum.photos/id/0/600/300" alt="Python基础入门" class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
                                <span class="absolute top-2 right-2 bg-sky-600 text-white text-xs px-2 py-1 rounded">师傅课程</span>
                            </div>
                            <div class="p-4">
                                <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
                                    <i class="fa fa-python text-blue-500"></i>
                                    <span>Python</span>
                                    <span class="mx-1">•</span>
                                    <span>2024-09-15</span>
                                </div>
                                <h3 class="font-medium text-lg mb-2 line-clamp-1">Python基础入门到实战</h3>
                                <p class="text-gray-600 text-sm mb-3 line-clamp-2">从环境搭建到实战项目，包含变量、函数、面向对象等核心知识点，附师傅独家避坑指南。</p>
                                <div class="flex items-center justify-between text-sm">
                                    <div class="flex items-center gap-1 text-yellow-500">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-half-o"></i>
                                        <span class="text-gray-600 ml-1">4.8</span>
                                    </div>
                                    <span class="text-gray-500"><i class="fa fa-user-o"></i> 1258人学习</span>
                                </div>
                            </div>
                        </div>

                        <!-- 课程卡片2 -->
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden card-hover cursor-pointer" @click="showCourseDetail = true; currentCourseId = 2">
                            <div class="relative">
                                <img src="https://picsum.photos/id/180/600/300" alt="MySQL数据库" class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
                                <span class="absolute top-2 right-2 bg-green-600 text-white text-xs px-2 py-1 rounded">公开课程</span>
                            </div>
                            <div class="p-4">
                                <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
                                    <i class="fa fa-database text-orange-500"></i>
                                    <span>MySQL</span>
                                    <span class="mx-1">•</span>
                                    <span>2024-08-20</span>
                                </div>
                                <h3 class="font-medium text-lg mb-2 line-clamp-1">MySQL从入门到精通</h3>
                                <p class="text-gray-600 text-sm mb-3 line-clamp-2">掌握SQL语句、索引优化、事务处理，附100道实战练习题和师傅手写解题思路。</p>
                                <div class="flex items-center justify-between text-sm">
                                    <div class="flex items-center gap-1 text-yellow-500">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="text-gray-600 ml-1">4.2</span>
                                    </div>
                                    <span class="text-gray-500"><i class="fa fa-user-o"></i> 986人学习</span>
                                </div>
                            </div>
                        </div>

                        <!-- 课程卡片3（VIP） -->
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden card-hover cursor-pointer" @click="showCourseDetail = true; currentCourseId = 3">
                            <div class="relative">
                                <img src="https://picsum.photos/id/160/600/300" alt="Python爬虫实战" class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
                                <span class="absolute top-2 right-2 bg-purple-600 text-white text-xs px-2 py-1 rounded">VIP课程</span>
                            </div>
                            <div class="p-4">
                                <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
                                    <i class="fa fa-python text-blue-500"></i>
                                    <span>Python</span>
                                    <span class="mx-1">•</span>
                                    <span>2024-10-05</span>
                                </div>
                                <h3 class="font-medium text-lg mb-2 line-clamp-1">Python爬虫实战：从0爬取数据</h3>
                                <p class="text-gray-600 text-sm mb-3 line-clamp-2">包含Requests、BeautifulSoup、Selenium实战，教你绕过反爬机制，附10个真实爬取案例。</p>
                                <div class="flex items-center justify-between text-sm">
                                    <div class="flex items-center gap-1 text-yellow-500">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <span class="text-gray-600 ml-1">4.9</span>
                                    </div>
                                    <span class="text-gray-500"><i class="fa fa-user-o"></i> 562人学习</span>
                                </div>
                            </div>
                        </div>

                        <!-- 课程卡片4 -->
                        <div class="bg-white rounded-lg shadow-sm overflow-hidden card-hover cursor-pointer" @click="showCourseDetail = true; currentCourseId = 4">
                            <div class="relative">
                                <img src="https://picsum.photos/id/24/600/300" alt="Java基础" class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
                                <span class="absolute top-2 right-2 bg-sky-600 text-white text-xs px-2 py-1 rounded">师傅课程</span>
                            </div>
                            <div class="p-4">
                                <div class="flex items-center gap-2 text-sm text-gray-500 mb-2">
                                    <i class="fa fa-coffee text-brown-500"></i>
                                    <span>Java</span>
                                    <span class="mx-1">•</span>
                                    <span>2024-07-10</span>
                                </div>
                                <h3 class="font-medium text-lg mb-2 line-clamp-1">Java零基础入门</h3>
                                <p class="text-gray-600 text-sm mb-3 line-clamp-2">从JDK安装到面向对象编程，包含数组、集合、IO流等核心内容，附师傅调试技巧。</p>
                                <div class="flex items-center justify-between text-sm">
                                    <div class="flex items-center gap-1 text-yellow-500">
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star"></i>
                                        <i class="fa fa-star-o"></i>
                                        <span class="text-gray-600 ml-1">4.1</span>
                                    </div>
                                    <span class="text-gray-500"><i class="fa fa-user-o"></i> 832人学习</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 课程详情页（点击课程卡片后显示） -->
                    <div v-if="showCourseDetail" class="bg-white rounded-lg shadow-sm overflow-hidden animate-fadeIn">
                        <!-- 课程头部 -->
                        <div class="relative">
                            <img src="https://picsum.photos/id/0/1200/400" alt="课程封面" class="w-full h-64 md:h-80 object-cover">
                            <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                                <div class="p-6 text-white">
                                    <div class="flex items-center gap-2 mb-2">
                                        <span class="bg-sky-600 text-white text-xs px-2 py-1 rounded">师傅课程</span>
                                        <span class="text-sm opacity-90"><i class="fa fa-python mr-1"></i> Python</span>
                                    </div>
                                    <h1 class="text-2xl md:text-3xl font-semibold mb-2">Python基础入门到实战</h1>
                                    <p class="text-sm opacity-90 max-w-2xl">从环境搭建到实战项目，包含变量、函数、面向对象等核心知识点，附师傅独家避坑指南。</p>
                                </div>
                            </div>
                            <button @click="showCourseDetail = false" class="absolute top-4 left-4 bg-black/50 hover:bg-black/70 text-white w-8 h-8 rounded-full flex items-center justify-center transition-colors">
                                <i class="fa fa-arrow-left"></i>
                            </button>
                        </div>

                        <!-- 课程信息栏 -->
                        <div class="border-b border-gray-200 px-6 py-4">
                            <div class="flex flex-wrap items-center gap-x-8 gap-y-2 text-sm">
                                <div class="flex items-center gap-1 text-gray-600">
                                    <i class="fa fa-user-circle-o text-sky-500"></i>
                                    <span>主讲：李师傅</span>
                                </div>
                                <div class="flex items-center gap-1 text-gray-600">
                                    <i class="fa fa-clock-o text-sky-500"></i>
                                    <span>总时长：12小时30分钟</span>
                                </div>
                                <div class="flex items-center gap-1 text-gray-600">
                                    <i class="fa fa-list-ol text-sky-500"></i>
                                    <span>32个章节</span>
                                </div>
                                <div class="flex items-center gap-1 text-gray-600">
                                    <i class="fa fa-calendar text-sky-500"></i>
                                    <span>更新于：2024-09-15</span>
                                </div>
                                <div class="flex items-center gap-1 text-yellow-500 ml-auto">
                                    <i class="fa fa-star"></i>
                                    <span>4.8 (126人评价)</span>
                                </div>
                            </div>
                        </div>

                        <!-- 课程内容区（左侧章节列表 + 右侧内容） -->
                        <div class="flex flex-col lg:flex-row">
                            <!-- 左侧章节列表 -->
                            <div class="lg:w-1/3 border-r border-gray-200 p-4 max-h-[calc(100vh-320px)] overflow-y-auto">
                                <h3 class="section-title">课程章节</h3>
                                <div class="space-y-6">
                                    <!-- 第一章 -->
                                    <div>
                                        <div class="font-medium text-gray-900 mb-3 flex items-center gap-2" @click="toggleChapter(1)">
                                            <i class="fa fa-chevron-right text-xs transition-transform duration-300" :class="{ 'rotate-90': expandedChapters.includes(1) }"></i>
                                            <span>第1章：Python环境搭建</span>
                                            <span class="ml-auto text-sm text-gray-500">3小节 · 45分钟</span>
                                        </div>
                                        <ul class="pl-6 space-y-1.5" v-if="expandedChapters.includes(1)">
                                            <!-- 视频节点 -->
                                            <li class="flex items-center gap-3 p-2.5 rounded node-hover cursor-pointer group" @click="setCurrentNode('1.1')">
                                                <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                                                    <i class="fa fa-play text-blue-600 text-xs"></i>
                                                </div>
                                                <span class="text-sm flex-1">1.1 Windows系统安装Python</span>
                                                <span class="text-xs text-gray-500">15分钟</span>
                                                <i class="fa fa-check text-green-500 text-xs opacity-0 group-hover:opacity-100 transition-opacity"></i>
                                            </li>
                                            
                                            <!-- 视频节点（已完成） -->
                                            <li class="flex items-center gap-3 p-2.5 rounded node-hover cursor-pointer" @click="setCurrentNode('1.2')">
                                                <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                                                    <i class="fa fa-play text-blue-600 text-xs"></i>
                                                </div>
                                                <span class="text-sm flex-1">1.2 Mac系统安装Python</span>
                                                <span class="text-xs text-gray-500">10分钟</span>
                                                <i class="fa fa-check text-green-500 text-xs"></i>
                                            </li>
                                            
                                            <!-- 图文节点（当前节点） -->
                                            <li class="flex items-center gap-3 p-2.5 rounded node-active cursor-pointer" @click="setCurrentNode('1.3')">
                                                <div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0">
                                                    <i class="fa fa-file-text-o text-sky-600 text-xs"></i>
                                                </div>
                                                <span class="text-sm flex-1 font-medium">1.3 安装包与环境变量配置（图文教程）</span>
                                                <span class="text-xs">素材</span>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- 第二章 -->
                                    <div>
                                        <div class="font-medium text-gray-900 mb-3 flex items-center gap-2" @click="toggleChapter(2)">
                                            <i class="fa fa-chevron-right text-xs transition-transform duration-300" :class="{ 'rotate-90': expandedChapters.includes(2) }"></i>
                                            <span>第2章：变量与数据类型</span>
                                            <span class="ml-auto text-sm text-gray-500">4小节 · 60分钟</span>
                                        </div>
                                        <ul class="pl-6 space-y-1.5" v-if="expandedChapters.includes(2)">
                                            <!-- 视频节点 -->
                                            <li class="flex items-center gap-3 p-2.5 rounded node-hover cursor-pointer group" @click="setCurrentNode('2.1')">
                                                <div class="w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                                                    <i class="fa fa-play text-blue-600 text-xs"></i>
                                                </div>
                                                <span class="text-sm flex-1">2.1 什么是变量（视频讲解）</span>
                                                <span class="text-xs text-gray-500">15分钟</span>
                                                <i class="fa fa-check text-green-500 text-xs opacity-0 group-hover:opacity-100 transition-opacity"></i>
                                            </li>
                                            
                                            <!-- 图文节点 -->
                                            <li class="flex items-center gap-3 p-2.5 rounded node-hover cursor-pointer group" @click="setCurrentNode('2.2')">
                                                <div class="w-6 h-6 rounded-full bg-sky-100 flex items-center justify-center flex-shrink-0">
                                                    <i class="fa fa-file-text-o text-sky-600 text-xs"></i>
                                                </div>
                                                <span class="text-sm flex-1">2.2 数据类型详解（图文教程）</span>
                                                <span class="text-xs text-gray-500">20分钟</span>
                                                <i class="fa fa-check text-green-500 text-xs opacity-0 group-hover:opacity-100 transition-opacity"></i>
                                            </li>
                                            
                                            <!-- 素材节点 -->
                                            <li class="flex items-center gap-3 p-2.5 rounded node-hover cursor-pointer group" @click="setCurrentNode('2.3')">
                                                <div class="w-6 h-6 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
                                                    <i class="fa fa-download text-green-600 text-xs"></i>
                                                </div>
                                                <span class="text-sm flex-1">2.3 数据类型练习题（素材下载）</span>
                                                <span class="text-xs text-gray-500">5题</span>
                                                <i class="fa fa-check text-green-500 text-xs opacity-0 group-hover:opacity-100 transition-opacity"></i>
                                            </li>
                                        </ul>
                                    </div>

                                    <!-- VIP章节（带锁标识） -->
                                    <div>
                                        <div class="font-medium text-gray-900 mb-3 flex items-center gap-2" @click="toggleChapter(3)">
                                            <i class="fa fa-chevron-right text-xs transition-transform duration-300" :class="{ 'rotate-90': expandedChapters.includes(3) }"></i>
                                            <span>第3章：函数进阶（VIP）</span>
                                            <span class="ml-auto text-sm text-gray-500">5小节 · 75分钟</span>
                                        </div>
                                        <ul class="pl-6 space-y-1.5" v-if="expandedChapters.includes(3)">
                                            <li class="flex items-center gap-3 p-2.5 rounded node-hover cursor-not-allowed opacity-70">
                                                <div class="w-6 h-6 rounded-full bg-gray-100 flex items-center justify-center flex-shrink-0">
                                                    <i class="fa fa-lock text-gray-400 text-xs"></i>
                                                </div>
                                                <span class="text-sm flex-1">3.1 函数参数高级用法</span>
                                                <span class="text-xs text-gray-500">VIP专享</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                            <!-- 右侧内容区（根据节点类型自适应展示） -->
                            <div class="lg:w-2/3 p-6 overflow-y-auto max-h-[calc(100vh-320px)]">
                                <!-- 内容区标题 -->
                                <div class="mb-6">
                                    <h2 class="text-xl font-semibold mb-2">1.3 安装包与环境变量配置（图文教程）</h2>
                                    <div class="flex items-center gap-3 text-sm text-gray-500 mb-4">
                                        <span><i class="fa fa-file-text-o mr-1 text-sky-500"></i> 图文教程</span>
                                        <span><i class="fa fa-clock-o mr-1"></i> 预计阅读：20分钟</span>
                                        <span><i class="fa fa-download mr-1"></i> 配套素材：2个</span>
                                        <button class="ml-auto bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full hover:bg-green-200 transition-colors">
                                            <i class="fa fa-check mr-1"></i> 标记为已完成
                                        </button>
                                    </div>
                                </div>

                                <!-- 1. 图文内容示例 -->
                                <div class="prose max-w-none mb-8">
                                    <p class="mb-4">当Python安装完成后，需要配置环境变量才能在任意目录下使用Python命令，以下是详细步骤：</p>
                                    
                                    <h3 class="text-lg font-medium mt-6 mb-3">Windows系统配置步骤</h3>
                                    <ol class="list-decimal pl-5 mb-4 space-y-2">
                                        <li>右键「此电脑」→「属性」→「高级系统设置」→「环境变量」；</li>
                                        <li>在「系统变量」中找到「Path」，点击「编辑」；</li>
                                        <li>点击「新建」，添加Python的安装路径（如：<code>C:\Python39</code>）和Scripts路径（如：<code>C:\Python39\Scripts</code>）；</li>
                                        <li>点击「确定」保存，关闭所有窗口。</li>
                                    </ol>
                                    
                                    <!-- 师傅批注区 -->
                                    <div class="bg-blue-50 p-4 rounded-lg my-6 border-l-4 border-sky-500">
                                        <h4 class="font-medium mb-2 flex items-center gap-2">
                                            <i class="fa fa-comment text-sky-500"></i> 师傅批注
                                        </h4>
                                        <p class="text-sm text-gray-700">很多徒弟在这里会漏掉「Scripts」路径，导致后续安装第三方库（如pip install requests）时提示"命令找不到"，一定要记得添加！当年小王就因为这个卡了一下午，后来我让他检查Path才发现问题。</p>
                                    </div>
                                    
                                    <!-- 代码块示例 -->
                                    <h3 class="text-lg font-medium mt-6 mb-3">验证是否配置成功</h3>
                                    <p class="mb-3">按下 <code>Win + R</code>，输入 <code>cmd</code> 打开命令提示符，输入以下命令：</p>
                                    <div class="bg-gray-900 text-white p-3 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
                                        python --version<br>
                                        pip --version
                                    </div>
                                    <p>如果能显示版本号，说明配置成功；如果提示"不是内部或外部命令"，请重新检查步骤3的路径是否正确。</p>
                                </div>

                                <!-- 2. 素材下载区 -->
                                <div class="bg-gray-50 p-5 rounded-lg mb-8 border border-gray-200">
                                    <h3 class="font-medium mb-4 flex items-center gap-2">
                                        <i class="fa fa-download text-green-500"></i> 配套素材下载
                                    </h3>
                                    <ul class="space-y-3">
                                        <li class="flex items-center justify-between p-3 bg-white rounded border border-gray-100 hover:border-gray-300 transition-colors">
                                            <div class="flex items-center gap-3">
                                                <div class="w-10 h-10 rounded bg-orange-100 flex items-center justify-center">
                                                    <i class="fa fa-file-zip-o text-orange-500 text-xl"></i>
                                                </div>
                                                <div>
                                                    <h4 class="text-sm font-medium">Python安装包合集（3.8-3.12版本）.zip</h4>
                                                    <p class="text-xs text-gray-500 mt-0.5">大小：256MB · 适用所有系统</p>
                                                </div>
                                            </div>
                                            <button class="px-3 py-1.5 bg-green-500 text-white text-sm rounded hover:bg-green-600 transition-colors flex items-center gap-1">
                                                <i class="fa fa-download"></i> 下载
                                            </button>
                                        </li>
                                        <li class="flex items-center justify-between p-3 bg-white rounded border border-gray-100 hover:border-gray-300 transition-colors">
                                            <div class="flex items-center gap-3">
                                                <div class="w-10 h-10 rounded bg-red-100 flex items-center justify-center">
                                                    <i class="fa fa-file-pdf-o text-red-500 text-xl"></i>
                                                </div>
                                                <div>
                                                    <h4 class="text-sm font-medium">环境变量配置步骤图解.pdf</h4>
                                                    <p class="text-xs text-gray-500 mt-0.5">大小：4.2MB · 含高清截图</p>
                                                </div>
                                            </div>
                                            <button class="px-3 py-1.5 bg-green-500 text-white text-sm rounded hover:bg-green-600 transition-colors flex items-center gap-1">
                                                <i class="fa fa-download"></i> 下载
                                            </button>
                                        </li>
                                    </ul>
                                </div>

                                <!-- 3. 视频播放区（默认隐藏，切换到视频节点时显示） -->
                                <div class="hidden bg-gray-900 rounded-lg overflow-hidden mb-8 aspect-video" id="videoPlayer">
                                    <video controls class="w-full h-full object-cover">
                                        <source src="your-video.mp4" type="video/mp4">
                                        您的浏览器不支持视频播放
                                    </video>
                                    <div class="p-4 bg-gray-800 text-white text-sm flex justify-between items-center">
                                        <div class="flex items-center gap-4">
                                            <button class="hover:text-sky-400 transition-colors">
                                                <i class="fa fa-backward mr-1"></i> 0.5x
                                            </button>
                                            <button class="hover:text-sky-400 transition-colors">
                                                <i class="fa fa-bookmark-o mr-1"></i> 记笔记
                                            </button>
                                        </div>
                                        <div>05:23 / 15:00</div>
                                    </div>
                                </div>

                                <!-- 章节节点切换按钮 -->
                                <div class="flex justify-between mt-10 pt-5 border-t border-gray-200">
                                    <button class="flex items-center gap-2 px-4 py-2.5 border border-gray-300 rounded hover:bg-gray-50 transition-colors">
                                        <i class="fa fa-arrow-left"></i>
                                        <span>上一节：Mac系统安装Python</span>
                                    </button>
                                    <button class="flex items-center gap-2 px-4 py-2.5 bg-sky-500 text-white rounded hover:bg-sky-600 transition-colors">
                                        <span>下一节：什么是变量</span>
                                        <i class="fa fa-arrow-right"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>

        <!-- 底部 -->
        <footer class="bg-gray-900 text-gray-400 mt-12 py-8">
            <div class="container mx-auto px-4 text-center text-sm">
                <p>© 2024 师徒编程 | 用经验传递温度，用思想照亮前路</p>
                <p class="mt-2">专注编程教学，不止教知识，更教方法与思想</p>
            </div>
        </footer>
    </div>

    <script>
        const app = Vue.createApp({
            data() {
                return {
                    // 当前选中的课程分类
                    currentCategory: 'python',
                    // 当前筛选条件
                    currentFilter: 'all',
                    // 是否显示课程详情页
                    showCourseDetail: false,
                    // 当前课程ID
                    currentCourseId: 1,
                    // 展开的章节ID
                    expandedChapters: [1],
                    // 当前节点ID
                    currentNode: '1.3',
                    // 移动端菜单是否打开
                    mobileMenuOpen: false
                }
            },
            methods: {
                // 选择课程分类
                selectCategory(category) {
                    this.currentCategory = category;
                    this.showCourseDetail = false; // 切换分类时回到列表页
                },
                // 选择筛选条件
                selectFilter(filter) {
                    this.currentFilter = filter;
                },
                // 展开/折叠章节
                toggleChapter(chapterId) {
                    if (this.expandedChapters.includes(chapterId)) {
                        this.expandedChapters = this.expandedChapters.filter(id => id !== chapterId);
                    } else {
                        this.expandedChapters.push(chapterId);
                    }
                },
                // 设置当前节点
                setCurrentNode(nodeId) {
                    this.currentNode = nodeId;
                    // 实际项目中可根据nodeId切换内容区显示（视频/图文/素材）
                    console.log('切换到节点：', nodeId);
                },
                // 切换移动端菜单
                toggleMobileMenu() {
                    this.mobileMenuOpen = !this.mobileMenuOpen;
                }
            }
        }).mount('#app');
    </script>
</body>
</html>
